<template>
  <div class="Find">
    <TopSearch class="top" type="song" :actived="true" :defaultKeyword="searchWord" />
    <Banner :autoplay="3000" indicator-color="#de3b2c" :banners="banners" />
    <MenuBar class="menu_bar" />
    <SongList
      class="center_content"
      btnText="歌单广场"
      :list="songList"
      :title="['推荐歌单']"
      @btnClick="$router.replace('/s')"
    />
    <SongList :btnText="asuBtnText" class="center_content" :list="asuList" :title="['新碟','新歌']" @titleClick="titleClick" />
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

//components
import TopSearch from "@/components/TopSearch";
import Banner from "@/components/Banner";
import MenuBar from "@/components/MenuBar";
import SongList from "@/components/SongList";

export default {
  data() {
    return {
      asuList: [],
      asuBtnText:'更多新碟'
    };
  },
  computed: {
    ...mapState("Find", [
      "banners",
      "searchWord",
      "songList",
      "saucerList",
      "newSongsList"
    ])
  },
  components: {
    TopSearch,
    Banner,
    MenuBar,
    SongList
  },
  async created() {
    await this.getInitData();
    this.asuList = this.saucerList;
  },
  methods: {
    ...mapActions("Find", ["getInitData"]),
    async titleClick(ind) {
      if (ind === 0) {
        this.asuBtnText = '更多新碟'
        this.asuList = this.saucerList;
      } else {
        this.asuBtnText = '新歌推荐'
        this.asuList = this.newSongsList;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.Find {
  border: 1px solid transparent;
}
.top {
  margin: 10px 0;
}
.menu_bar {
  @include border-bottom;
}
.center_content {
  width: 345px;
  margin: 0 auto;
}
</style>